<template>
  <div id="app">
    <bottom-nav></bottom-nav>
    <keep-alive>
      <router-view @play="play"/>    
    </keep-alive>
      <play v-if="playMusic" 
      :playMusic="playMusic" @changeMusic="changeMusic" :playList="playList"></play>
    <!-- <router-view /> -->
  </div>
</template>
<script>
import BottomNav from "@/components/BottomNav";
import Play from "@/components/Play"
export default {
  data(){
    return {
      banner:[],
      playMusic:null,
      playList:[]
    }
  },
  methods:{
    play(event){
      if(event.al&&event.al.picUrl){
        event.picUrl=event.al.picUrl;
      }
      this.playMusic=event;
      let isRepeat=false;
      this.playList.forEach((v)=>{
        if(v.id==event.id){
          isRepeat=true;
        }
      });
      if(!isRepeat) this.playList.push(event);
    },
    changeMusic(event){
      let currIndex=0;
      this.playList.forEach((v,index)=>{
        if(v.id==this.playMusic.id){
          currIndex=index;
        }
      })
      if(event=='prev'){
        if(currIndex==0){
          currIndex=this.playList.length-1;
        }else{
          currIndex--;
        }
      }else if(event=="next"){
        if(currIndex==this.playList.length-1){
          currIndex=0;
        }else{
          currIndex++;
        }
      }else if(typeof event == 'object'){
        this.playMusic=event;
        return;
      }
      this.playMusic=this.playList[currIndex];
    }
  },
  created() {},
  components: {
    'bottom-nav': BottomNav,
    Play,
  },
};
</script>
<style lang="less">
</style>
